<template>
  <div class="tags" ref="tagsRef">
    <!-- 标题区域 -->
    <van-sticky ref="stickyRef">
      <header-component :title="title" :showPre="false" :titleSlide="titleSlide">
        <template #operate>
          <van-search
              v-model="wordKey"
              clearable
              background="#efefeff2"
              placeholder="快速查找"
          />
        </template>
      </header-component>
    </van-sticky>
    <!-- 主体内容区 -->
    <van-pull-refresh v-model="loading" @refresh="onRefresh" success-text="刷新成功">
      <section>
        <tabs @handleChangeCurrentTab="handleChange" :tabs="tabsList"></tabs>
        <tag-list class="tag-list" :content="data.notTag"/>

        <!-- 内容标题 -->
        <breadcrumbNavigation v-if="CollectTitle" :title="CollectTitle"
                              :showAddIcon="true" @add="handleCreate"></breadcrumbNavigation>
        <!-- 收藏夹区域 -->
        <tag-list class="tag-list"
                  :showRightSlot="true"
                  :content="data.tags"
                  :showMore="true">
          <!-- 右侧内容 -->
          <template #rightSlot="props">
            <span>{{ props.item.totalNum }}</span>
          </template>
          <!-- 右侧滑动操作内容 -->
          <template #rightSlide="props">
            <van-button
                icon="ellipsis"
                color="#626365"
                square
                @click="handleOperate(props.item)"
            />
            <van-button icon="edit" square type="primary" @click="handleEdit(props.item)"/>
            <van-button icon="add" square type="success" @click="handleEdit(props.item)"/>
          </template>
          <template #more="props">
            <operate-box :is-show="useOperatorBoxStore().isShowOverlay" @handleClose="handleClose">
              <operate :title="currentCollect.name" v-if="useOperatorBoxStore().showOverlayType==='operate'">
                <div style="height: 34px;line-height: 34px;font-size: 16px;" v-for="(item,index) in menu"
                     @click="handleOperateClick(index)">
                  <van-space :style="{ color: item.iconColor }">
                    <i :class="item.iconfont"></i>
                    <span v-text="item.text"></span>
                  </van-space>
                </div>
              </operate>
              <edit :editTitle="editTitle"
                    :nameTips="nameTips"
                    @submit="handleSubmit"
                    :showTag="false"
                    :showIconSelect="false"
                    :showTagColor="false"
                    :showIconColor="false"
                    v-else-if="useOperatorBoxStore().showOverlayType==='edit'"></edit>
              <icon-select v-else-if="useOperatorBoxStore().showOverlayType==='icon'"/>
            </operate-box>
          </template>
        </tag-list>
      </section>

    </van-pull-refresh>
  </div>
</template>

<script>
export default {name: "home"};
</script>

<script setup>
import HeaderComponent from "@/components/header/index.vue";
import {getCurrentInstance, reactive, ref, toRaw, toRefs, watch} from "vue";
import TagList from '@/components/list/tagList.vue'
import BreadcrumbNavigation from "@/components/breadcrumbNavigation/index.vue";
import OperateBox from "@/components/operateBox/index.vue";
import operate from "@/components/operateBox/operate.vue";
import edit from "@/components/operateBox/collectEdit.vue";
import {useScrollWatch, useScrollWatch2} from "@/hooks/userScrollWatch.js";
import {addLabel, delLabel, listLabel, updateLabel} from "@/api/label/label.js";
import {deepCopy} from "@/utils/objUtils.js";
import useCollectEditStore from "@/stores/modules/collectEdit.js";
import useOperatorBoxStore from "@/stores/modules/operatorBox.js";
import strinigUtils from "@/utils/stringUtils.js";

const currentTab = ref(0);
const tabsList = [{title: '自定义排序'}, {title: '名称排序'}];

const handleChange = (val) => {
  currentTab.value = val;
}
const data = new reactive({
  // 标题
  title: "标签",
  wordKey: '',
  form: {},
  queryParams: {
    name: undefined,
    tagName: undefined
  },
  notTag: [
    {
      "createBy": "1655495937@qq.com",
      "createTime": "2023-03-25 14:06:45",
      "updateBy": "1655495937@qq.com",
      "updateTime": "2023-03-25 15:43:44",
      "remark": null,
      "collectId": "1089188628518666240",
      "title": null,
      "name": "无标签",
      "icon": "fa-solid fa-tag",
      "iconColor": "",
      "uId": 107,
      "status": null,
      "url": "/detail?name=23",
      "totalNum": 0,
      "operate": null,
      "info": null,
      "collectType": 1,
      "tagName": "首选项",
      "tagColor": "",
      "tagBgColor": "#FDC830"
    },
  ],
  tags: []
});
const editData = reactive({
  // 当前操作集合
  currentCollect: {},

  CollectTitle: '5个标签',

  // 遮罩层编辑标题
  editTitle: '创建标签',

  // 遮罩层编辑提示
  nameTips: '请输入标签名称',

})

const {proxy} = getCurrentInstance();


const {queryParams, form, wordKey, title} = toRefs(data);
const {currentCollect, CollectTitle, editTitle, nameTips} = toRefs(editData);

/** 操作菜单 */
const menu = ref([
  {url: "/home", iconfont: "iconfont icon-guidang", iconColor: "", text: "添加嵌套标签"},
  {url: "/home", iconfont: "iconfont icon-guidang", iconColor: "", text: "合并到标签"},
  {url: "/home", iconfont: "iconfont icon-guidang", iconColor: "", text: "移动到标签"},
  {url: "/home", iconfont: "iconfont icon-lianjie1", iconColor: "", text: "复制YBox链接"},
  {url: "/home", iconfont: "fa-regular fa-trash-can", iconColor: "red", text: "删除"},
])

/********************操作类-start********************/

/** 初始化collect */
const initCollect = () => {
  useCollectEditStore().setContent(toRaw({
    url: "",
    icon: "iconfont icon-24gl-tags4",
    iconColor: "",
    name: "",
    tagColor: "",
    tagBgColor: "",
    tagName: "",
    value: ""
  }))
  nameTips.value = '请输入标签名称';
}
/** 添加收藏夹 */
const handleCreate = () => {
  // 1. 点击添加按钮修改组件标题
  editTitle.value = '创建标签'
  // 2. 打开遮罩层
  useOperatorBoxStore().showOverlay(true, 'edit');
  initCollect();
}
/** 编辑收藏夹 */
const handleEdit = (item) => {
  // 1. 点击编辑按钮修改组件标题
  editTitle.value = '编辑标签'
  // 2. 打开遮罩层
  useOperatorBoxStore().showOverlay(true, 'edit');
  let result = deepCopy(toRaw(item));
  nameTips.value = result.name;
  useCollectEditStore().setContent(result);
};
/** 打开收藏夹操作菜单 */
const handleOperate = (value) => {
  // 1. 点击操作按钮，先给当前collect赋值
  currentCollect.value = value
  // 2. 赋值后显示
  useOperatorBoxStore().showOverlay(true, 'operate');
};
/** 关闭遮罩层 */
const handleClose = (value) => {
  // console.log(value)
  useOperatorBoxStore().setIsShowOverlay(false)
}

/** 操作菜单点击,更多操作栏点击某个按钮触发事件 */
function handleOperateClick(index) {
  if (!currentCollect.value) return
  console.log(index)
  switch (index) {
      /** 0 复制链接 */
    case 0:
      break;
      /** 1 归档 */
    case 1:
      break;
      /** 4 删除收藏 */
    case 4:
      delLabel(useCollectEditStore().content.labelId).then(response => {
        proxy.$modal.toastSuccess("修改成功");
        useOperatorBoxStore().setIsShowOverlay(false);
        getLabelList(null);
      });
      break;
      // 规定不存在 case 匹配时所运行的代码
    default:
      break;
  }
}

/** 滑动菜单更新与新增 */
function handleSubmit() {
  if (strinigUtils.isEmpty(useCollectEditStore().content.name)) {
    // 条件不满足(无收藏标题且无图标)
    useOperatorBoxStore().showOverlay(false, 'icon');
    return
  } else {
    console.log(useCollectEditStore().content)
    if (useCollectEditStore().content.labelId != undefined) {
      updateLabel(toRaw(useCollectEditStore().content)).then(response => {
        proxy.$modal.toastSuccess("修改成功");
        useOperatorBoxStore().setIsShowOverlay(false);
        getLabelList(null);
      });
    } else {
      addLabel(toRaw(useCollectEditStore().content)).then(response => {
        proxy.$modal.toastSuccess("新增成功");
        // 关闭遮罩层
        useOperatorBoxStore().setIsShowOverlay(false);
        getLabelList(null);
      });
    }
  }
}
function getLabelList(queryParams) {
  listLabel(queryParams).then(response => {
    data.tags = response.data
  });
}

/********************操作类-end********************/
/** 查询收藏夹列表 */
function getList() {
  getLabelList(queryParams.value)
}

/** 下拉刷新 */
const loading = ref(false);
const onRefresh = () => {
  listLabel(data.queryParams).then(response => {
    useCollectEditStore().tags = response.data
    loading.value = false
  })
};

/** 标题动画相关的操作 */
const tagsRef = ref();
const stickyRef = ref();
let titleSlide = useScrollWatch(tagsRef)
useScrollWatch2(titleSlide, stickyRef)

getList()
</script>

<style lang="less" scoped>

.tags {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: 160px;

  :deep(.van-pull-refresh) {
    position: relative;
    top: 50px;
    padding: 0 12px;

    section {
      .breadCrumbNavigation {
        position: relative;
        top: 10px;
      }

      .tag-list {
        position: relative;
        top: 10px;
      }
    }
  }
}

.tags::-webkit-scrollbar {
  display: none; /*隐藏滚动条*/
}
</style>
